<template>
    <div class="bg-[#F9FAFB] p-[1.5rem] min-h-screen">
        <!-- 标签栏 -->
        <div class="p-[1rem]">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-[2rem]">
                    <div 
                        v-for="tab in tabs" 
                        :key="tab.id"
                        class="text-[1rem] font-normal cursor-pointer flex items-center"
                        :class="activeTab === tab.id ? 'text-[#000] font-medium' : 'text-[#4B5563]'"
                        @click="activeTab = tab.id"
                    >
                        {{ tab.name }}
                        <span class="ml-[0.25rem] text-[#2563EB]">({{ tab.count }})</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容列表 -->
        <div class="bg-white rounded-[0.625rem] p-[1.5rem] shadow-sm">
            <div class="flex flex-col">
                <div 
                    v-for="item in filteredPosts" 
                    :key="item.id"
                    class="flex items-center py-[1rem] border-b border-[#F3F4F6] last:border-none"
                >
                    <!-- 头像 -->
                    <div class="w-[2.5rem] h-[2.5rem] rounded-full bg-[#F3F4F6] flex-shrink-0">
                        <img :src="item.authorAvatar" alt="" class="w-full h-full rounded-full" />
                    </div>

                    <!-- 标题和时间 -->
                    <div class="ml-[1rem] flex-1 cursor-pointer" @click="openArticleDialog(item)">
                        <div class="text-[1rem] font-medium text-[#000000] hover:text-[#2563EB]" >
                            {{ item.title }}
                        </div>
                        <div class="text-[0.875rem] text-[#9CA3AF] flex items-center mt-[0.25rem]">
                            <span>{{ item.releaseTime }}</span>
                            <span class="ml-[0.5rem]">来自: {{ item.author }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 文章详情弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            title="文章详情"
            width="700px"
            :show-close="true"
            :close-on-click-modal="false"
            :close-on-press-escape="true"
        >
            <ArticleCard 
                v-if="currentArticle" 
                :article="currentArticle"
                :border="false"
            />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElDialog } from 'element-plus';
import ArticleCard from '@/components/ArticleCard/index.vue';

// 标签页数据
const tabs = ref([
    { id: 'published', name: '我的发布', count: 10 },
    { id: 'collected', name: '我的收藏', count: 3 },
    { id: 'liked', name: '我的点赞', count: 5 },
    { id: 'recycle', name: '回收站', count: 1 }
]);

// 当前激活的标签
const activeTab = ref('published');

// 弹窗相关
const dialogVisible = ref(false);
const currentArticle = ref<any>(null);

// 打开文章详情弹窗
const openArticleDialog = (article: any) => {
    currentArticle.value = article;
    dialogVisible.value = true;
};

// 帖子数据（从List.vue复制过来的示例数据）
const posts = ref([
    {
        id: 1,
        author: '沅仁',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '9',
        title: '20:00 到，第 9 年的 "418 活动"正式收官！',
        description: '今天，我们迎来了 70000 名朋友，中正式完成了从 2765 元到 3365 元的价格阶梯，你看到了吗？之后新人仍然可以加入，只是价格略高一点。',
        releaseTime: '2025-05-23 10:00',
        comment: 272,
        like: 47,
        collect: 3,
        tags: ['自媒体','up主'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:['https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'],
        files:[],
        commentList: []
    },
    {
        id: 2,
        author: '小明',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '7',
        title: '欢迎 70000 位朋友，奔赴新的未来',
        description: '过去 8 年的时间，从 0 到 70000+，每一位朋友的加入，都是一次双向奔赴，感谢新朋友的信任，也感谢老朋友的陪伴行动。',
        releaseTime: '2025-05-21 10:00',
        comment: 244,
        like: 35,
        collect: 2,
        tags: ['小红书'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:['https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'],
        files:[],
        commentList: []
    },
    {
        id: 3,
        author: '张三',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '5',
        title: '分享我的学习经验',
        description: '最近在学习前端开发，分享一下我的学习心得...',
        releaseTime: '2025-05-20 15:30',
        comment: 156,
        like: 89,
        collect: 12,
        tags: ['小蓝书'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:['https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'],
        files:['http://xy.xiaoxu.wiki/chromedriver-win64.zip','http://xy.xiaoxu.wiki/chromedriver-win64.zip','http://xy.xiaoxu.wiki/chromedriver-win64.zip'],
        commentList: []
    }
]);

// 收藏的帖子数据
const collectedPosts = ref([
    {
        id: 4,
        author: '李四',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '6',
        title: '技术讨论：Vue3 vs React',
        description: '大家来讨论一下Vue3和React的优缺点...',
        releaseTime: '2025-05-19 09:15',
        comment: 342,
        like: 167,
        collect: 45,
        tags: ['技术讨论', 'Vue3', 'React'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:['https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D','https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'],
        files:[],
        commentList: []
    },
    {
        id: 5,
        author: '王五',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '8',
        title: '前端性能优化技巧总结',
        description: '分享一些我在实际项目中用到的前端性能优化方法...',
        releaseTime: '2025-05-18 16:45',
        comment: 198,
        like: 247,
        collect: 78,
        tags: ['前端', '性能优化'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:[],
        files:[],
        commentList: []
    },
    {
        id: 6,
        author: '赵六',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '5',
        title: '2025年前端发展趋势预测',
        description: '基于当前技术发展状况，对2025年前端技术趋势进行一些预测...',
        releaseTime: '2025-05-17 11:30',
        comment: 156,
        like: 321,
        collect: 92,
        tags: ['前端', '技术趋势'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:['https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'],
        files:[],
        commentList: []
    }
]);

// 点赞的帖子数据
const likedPosts = ref([
    {
        id: 7,
        author: '田七',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '7',
        title: 'TypeScript高级技巧分享',
        description: '分享一些TypeScript的高级用法和技巧，帮助你更好地使用TS...',
        releaseTime: '2025-05-16 14:20',
        comment: 235,
        like: 189,
        collect: 62,
        tags: ['TypeScript', '前端'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:[],
        files:[],
        commentList: []
    },
    {
        id: 8,
        author: '周八',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '6',
        title: '从零开始学习Three.js',
        description: '记录我学习Three.js的过程和心得体会...',
        releaseTime: '2025-05-15 09:30',
        comment: 145,
        like: 93,
        collect: 32,
        tags: ['Three.js', 'WebGL', '3D'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:['https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'],
        files:[],
        commentList: []
    }
]);

// 回收站帖子数据
const recycledPosts = ref([
    {
        id: 9,
        author: '吴九',
        authorAvatar: '/public/images/avatar.png',
        authorLevel: '4',
        title: '已删除的帖子',
        description: '这是一篇已被删除的帖子，可以从回收站恢复...',
        releaseTime: '2025-05-14 10:00',
        comment: 78,
        like: 45,
        collect: 12,
        tags: ['已删除'],
        likeNames: ['XXX','YYY','ZZZ'],
        images:[],
        files:[],
        commentList: []
    }
]);

// 根据当前选中的标签页过滤帖子
const filteredPosts = computed(() => {
    switch(activeTab.value) {
        case 'published':
            return posts.value;
        case 'collected':
            return collectedPosts.value;
        case 'liked':
            return likedPosts.value;
        case 'recycle':
            return recycledPosts.value;
        default:
            return posts.value;
    }
});
</script>

<style scoped lang="scss">
:deep(.el-dialog__header) {
    margin-right: 0;
    padding: 1rem 1.5rem;
    // border-bottom: 1px solid #F3F4F6;
}


:deep(.el-dialog__headerbtn) {
    top: 1rem;
    right: 1.5rem;
}
</style>